<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				border:0px;
			}
			.father{
				margin: 0px;
				border: 2px dashed red;
				width: 100%;
				height: 300px;
			}
			.son1,.son4{
				background-color: #0cf;
			}
			.son2,.son3{
				float: left;
				margin-right: 10px;
				background-color: red;
				
			}
			.son5{
				float: right;
				background-color:#fcf ;
			}
		</style>
	</head>
	<body>
		<!--
			block块级元素：
			1.独占一行
			2.不设置样式时，宽度自动继承父类
			inline行内元素:
			
		-->
		<div class="father">
			<div class="son1">div普通排版son1</div>
			<div class="son2">div向左浮动son2-------------------</div>
			<div class="son3">div向右浮动===============================son3</div>
			<div class="son4">div普通排版----------------------普通排版son4</div>
			<div class="son5">div向👉排版son5</div>
			<p>短路普通排版-----------------------</p>
		</div>
	</body>
</html>
